import React from 'react';
import { observer } from 'mobx-react';
import { ViewResourceProps } from '.';
import { Popover,Form,Button } from 'antd';
import moment from 'moment';
import {
  WeaSearchGroup,
  WeaTools,
  WeaFormItem,
  WeaLocaleProvider,
  WeaButton
} from 'ecCom';
import jQuery from "jquery";
const getLabel = WeaLocaleProvider.getLabel;

if (WeaLocaleProvider.getUserLanguage() == 7 || WeaLocaleProvider.getUserLanguage() == 9) {
  moment.locale('zh-cn');
} else {
  moment.locale('en');
}

@observer
class ViewResourceSearch extends React.Component<ViewResourceProps, any> {

  constructor(props) {
    super(props);
    this.state = {
      maskClosable: true,
      showPopover: false,
    }
  }

  componentDidMount() {
    jQuery("#container").on('click', this.click);
  }

  click=(e)=>{
    if(jQuery(e.target).closest('.ant-popover-content').length>0){//选择框内部点击,不重置
      this.setState({maskClosable: true});
    }else{
      this.setState({maskClosable: false,showPopover:false});
    }
  }

  render() {
    const { cubeViewResource } = this.props;
    const { conditions } = cubeViewResource;
    if (conditions && conditions.length > 0) {
    return (
      <Popover
        visible={this.state.showPopover}
        placement="bottom"
        content={this.getContent()}
        trigger="click"
        onVisibleChange={this.onVisibleChange}
        mask={true}
        maskClosable={this.state.maskClosable}
        overlayClassName="wea-meeting-popover"
      >
        <span style={{ display: 'inline-block', width: 25, cursor: 'pointer', fontSize: 14, color: '#b2b2b2' }} className="icon-coms-screen"></span>
      </Popover>
    )}else{
      return <span></span>
    }
  }

  onVisibleChange=(v)=>{
    this.setState({ showPopover: v })
  }

  getContent = () => {
    return (
      <div style={{ width: 350,maxHeight:400,overflowY:'auto'}}>
        <div style={{padding:0}}>{this.getSearchs()}</div>
        <div style={{textAlign:'center',lineHeight:'50px'}}>
          <Button style={{marginRight:'20px' }} type="primary" size="large"
            onClick={this.onclick}>{getLabel(197, "搜索")}</Button>
          <WeaButton size="large"
            onClick={this.reset}
            text={getLabel(2022, "重置")}
          />
        </div>
      </div>)
  }

  reset = ()=>{
    const { cubeViewResource } = this.props;
    this.props['form'].resetFields();
    cubeViewResource.queryparm={};
  }

  onclick=()=>{
    this.setState({ showPopover: false, });
    this.onSearch();
  }

  onSearch = ()=>{
      const { cubeViewResource } = this.props;
      cubeViewResource.query();
  }

  getSearchs = () => {
    const { cubeViewResource } = this.props;
    const { conditions } = cubeViewResource;
    let items = new Array();
    if (conditions && conditions.length > 0) {
      for (let field of conditions) {
        items.push({
          com: (
            <WeaFormItem
              label={`${field.label}`}
              labelCol={{ span: `${field.labelcol}` }}
              wrapperCol={{ span: `${field.fieldcol}` }}
            >
              {WeaTools.getComponent(
                field.conditionType,
                field.browserConditionParam,
                field.domkey,
                this.props,
                field
              )}
            </WeaFormItem>
          ),
          colSpan: field.colSpan || 2,
          hide: WeaTools.isComponentHide(field)
        });
      }
    }
    return <WeaSearchGroup style={{padding:0}} items={items} col={1} showGroup={true} needTigger={false} />;
  }

}
const viewResourceSearch = Form.create({
onFieldsChange(props, fields) {
  const { cubeViewResource } = props;
  let { queryparm } = cubeViewResource;
  for (let key in fields) {
    queryparm[fields[key].name] = fields[key].value;
  }
}
})(ViewResourceSearch);
export default viewResourceSearch;
